<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }



            .box{
                padding-left: 3px;
                padding-right: 3px;
                margin: 0 auto 0;
                width: 145px;

                background: rgb(244,244,244);
                border: 1px solid rgb(168,168,168);
            }
            .item {
                font-size: 0;
            }
            .item>*{
                display: inline-block;
                font-size: 12px;
                vertical-align: middle;
            }
            .item>.span1{
                width: 9px;
                height: 9px;
                margin: 1px 1px;

            }
            .item>.span2{
                width: 9px;
                height: 10px;
            }
            .item>p{
                width: 125px;
            }
            .img1{
                background: url("dh.png");
            }
            .img2{
                background: url("sj.png");
            }
            .img3{
                background: url("y.png");
            }

            .t{
                background: rgb(51,153,254);
            }

        </style>
    </head>
    <body>
    <div class="box">
        <div class="item">
            <span class="span1 "></span>
            <p>工具栏（T）</p>
            <span class="span2 img2" ></span>

        </div>
        <div class="item">
            <span class="span1 img1"></span>
            <p>状态栏（B）</p>
            <span class="span2 " ></span>

        </div>
        <div class="item">
            <span class="span1 "></span>
            <p>浏览器栏（E）</p>
            <span class="span2 img2" ></span>

        </div>
        <hr>
        <div class="item">
            <span class="span1 img3"></span>
            <p>缩略图（H）</p>
            <span class="span2 " ></span>

        </div>
        <div class="item">
            <span class="span1 "></span>
            <p>平铺（S）</p>
            <span class="span2 " ></span>

        </div>
        <div class="item t">
            <span class="span1 "></span>
            <p>图标（N）</p>
            <span class="span2 " ></span>

        </div>
        <div class="item">
            <span class="span1 "></span>
            <p>列表（L）</p>
            <span class="span2 " ></span>

        </div>
        <div class="item">
            <span class="span1 "></span>
            <p>详细信息（D）</p>
            <span class="span2 " ></span>

        </div>
        <hr>
        <div class="item">
            <span class="span1 "></span>
            <p>排列图标（I）</p>
            <span class="span2 img2" ></span>

        </div>
        <hr>
        <div class="item">
            <span class="span1 "></span>
            <p>选择详细信息（C）...</p>
            <span class="span2 " ></span>

        </div>
        <div class="item">
            <span class="span1 "></span>
            <p>自定义文件夹（F）...</p>
            <span class="span2 " ></span>

        </div>
        <hr>
        <div class="item">
            <span class="span1 "></span>
            <p>转到（ O）</p>
            <span class="span2 img2" ></span>

        </div>
        <div class="item">
            <span class="span1 "></span>
            <p>刷新（R）</p>
            <span class="span2 " ></span>

        </div>

    </div>


    </body>
</html>